<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="planes.css" />
	</head>
	<body>
		<div id = "body_main" class = "main">
			<ul id = "options" class = "options">
				<li value = "1">超级困难</li>
				<li value = "2">非常困难</li>
				<li value = "3">有点困难</li>
				<li value = "4">非常简单</li>
			</ul>
		</div>
	</body>
</html>
<script>
	window.onload = function(){
		new Engine().init();
	}
	function Engine(){
			if(!Engine.obj){
				Engine.obj = {
					ele : document.getElementById("body_main"),
					ullis : document.getElementsByTagName("li"),
					init : function(){
						//this.ullis = this.ele.children[0].children;
						var that = this;
						for(var i = 0;i < this.ullis.length;i ++){
							
							this.ullis[i].index = i; //记录游戏难度选项
							this.ullis[i].onclick = function(){
								//删除选项
								this.parentNode.remove();
								that.loadPage();
								//设置开火频率
								that.frequecy = this.index;
							}
						}
					},
					loadPage : function(){
						this.logo = createEle("div","logo");
						appendBody(this.logo);
						this.loading = createEle("div","loading");
						appendBody(this.loading);
						var that = this;
						var index = 1
						this.loadTimer = setInterval(function(){
							that.loading.style.background = "url(images/loading" + (index ++ % 3 + 1) + ".png) no-repeat";
						},500)
						//设置背景图运动
						var positionY = 0;
						setInterval(function(){
							that.ele.style.backgroundPositionY = ++positionY + "px";
						},30)
						//设置超时定时器（3秒后进入游戏）
						setTimeout(function(){
							//清场
							that.logo.remove();
							that.loading.remove();
							clearInterval(that.loadTimer);
							that.startGame();
						},3000)
					},
					startGame : function(){
						var myPlane = new Plane();
						//我方飞机入场
						myPlane.init();
						myPlane.fire(this.frequecy); //调用开火，传入游戏难度
						this.createEnemy(); //创建敌机
					},
					createEnemy : function(){
						//设置小、中、大敌机出现的概率
						setInterval(function(){
							Math.random() > 0.5 ? Enemy(0).init() : "";
						},500)
						setInterval(function(){
							Math.random() > 0.5 ? Enemy(1).init() : "";
						},3000)
						setInterval(function(){
							Math.random() > 0.2 ? Enemy(2).init() : "";
						},8000)
					}
				}
			}
			return Engine.obj;
		}
	function Plane () {
			if(!Plane.obj){
				Plane.obj = {
					ele : createEle("div","my-warplain"),
					bullet : [],
					init : function(){
						appendBody(this.ele);
						//定位我方飞机
						this.ele.style.left = document.documentElement.clientWidth / 2 - this.ele.offsetWidth / 2 + "px";
						this.ele.style.top = document.documentElement.clientHeight - this.ele.offsetHeight + "px";
					
						this.sport();
					},
					sport : function(){
						var body_main = document.getElementById("body_main");
						var that = this;
						document.onmousemove = function(evt){
							var e = evt || window.event;
							var left = e.pageX - that.ele.offsetWidth / 2;
							var top = e.pageY - that.ele.offsetHeight / 2;
							//设置边界
							if(left <= body_main.offsetLeft){
								left = body_main.offsetLeft;
							}else if(left >= body_main.offsetLeft + body_main.offsetWidth - that.ele.offsetWidth){
								left = body_main.offsetLeft + body_main.offsetWidth - that.ele.offsetWidth;
							}
							that.ele.style.left = left + "px";
							that.ele.style.top = top + "px";
						}
					},
					fire : function(frequecy){
						//设置开火频率
						var defaultFrequecy = 200;
						switch(frequecy){
							case 0 : defaultFrequecy = 500;break;
							case 1 : defaultFrequecy = 400;break;
							case 2 : defaultFrequecy = 200;break;
							case 3 : defaultFrequecy = 50;
						}
						//设置编号
						var id = 0;
						var that = this;
						setInterval(function(){
							var bullet = Bullet(id);
							//创建子弹并添加到数组中
							that.bullet.push(bullet);
							bullet.init();
							id ++;
						},defaultFrequecy)
					}
				}
			}
			return Plane.obj;
		}
	function Bullet(id){
			var obj = new Object();
			obj.id = id;
			obj.ele = createEle("div","bullet");
			obj.init = function(){
				let myPlane = new Plane();
//				console.log(myPlane);
				//给子弹打上编号 
				this.ele.id = this.id;
				//将子弹添加到页面中
				appendBody(this.ele);
				//定位子弹
				this.ele.style.left = myPlane.ele.offsetLeft + myPlane.ele.offsetWidth / 2 - this.ele.offsetWidth / 2 + "px";
				this.ele.style.top = myPlane.ele.offsetTop - this.ele.offsetHeight + "px";
				this.sport();
				//console.log(myPlane.ele.offsetLeft);
			}
			obj.sport = function(){
				this.timer = setInterval(function(){
					this.ele.style.top = this.ele.offsetTop - 15 + "px";
					if(this.ele.offsetTop <= 10){
						this.boom(); //调用爆炸函数
					}
				}.bind(this),50)
			}
			obj.boom = function(){
				let myPlane = new Plane();
				this.ele.className = "bullet-die";
				clearInterval(this.timer);
				setTimeout(function(){
					this.ele.remove();
					for(let i = 0;i < myPlane.bullet.length;i ++){
						if(this.ele.id == myPlane.bullet[i].id){
							myPlane.bullet.splice(i,1);
						}
					}
				}.bind(this),80)
				
			}
			return obj;
		}
	function Enemy(type){
			var obj = new Object();
			obj.type = type;
			obj.init = function(){
				switch(this.type){
					case 0 : this.ele = createEle("div","enemy-small");
							 this.hp = 1;
							 this.speed = 10;
							 break;
					case 1 : this.ele = createEle("div","enemy-middle");
							 this.hp = 5;
							 this.speed = 8;
							 break;
					case 2 : this.ele = createEle("div","enemy-large");
							 this.hp = 50;
							 this.speed = 2;
				}
				//加到页面中
				appendBody(this.ele);
				//定位敌机
				this.position();
			}
			obj.position = function(){
				const body_main = document.getElementById("body_main");
				this.ele.style.left = randomInt(body_main.offsetLeft,body_main.offsetLeft + body_main.offsetWidth - this.ele.offsetWidth) + "px";
				this.ele.style.top = 0;
				this.sport();
			}
			obj.sport = function(){
				this.timer = setInterval(function(){
					this.ele.style.top = this.ele.offsetTop + this.speed + "px";
					if(this.ele.offsetTop >= document.documentElement.clientHeight){
						this.ele.remove();
						clearInterval(this.timer);
					}
					this.collision(); //调用碰撞检测方法
				}.bind(this),50)
				
			}
			obj.collision = function(){
				let myPlane = new Plane();
				for(let i = 0;i < myPlane.bullet.length;i ++){
					if(!(myPlane.bullet[i].ele.offsetLeft + myPlane.bullet[i].ele.offsetWidth < this.ele.offsetLeft ||  this.ele.offsetLeft + this.ele.offsetWidth < myPlane.bullet[i].ele.offsetLeft)){
						if(!(myPlane.bullet[i].ele.offsetTop + myPlane.bullet[i].ele.offsetHeight < this.ele.offsetTop ||   this.ele.offsetTop + this.ele.offsetHeight < myPlane.bullet[i].ele.offsetTop)){
							myPlane.bullet[i].boom();
							this.hp --;
						if(this.hp <= 0){
								this.ele.remove();
							}
						}
					}
				}
			}
			return obj;
		}
	Element.prototype.remove = function(){
		this.parentNode.removeChild(this);
	}
	function createEle(target,className){
		var ele = document.createElement(target);
		ele.className = className;
		return ele;
	}
	function appendBody(ele){
	   document.body.appendChild(ele);
	}
	function randomInt(min,max){
		return Math.floor(Math.random() * (max - min + 1) + min);
	}
</script>